<template>
  <div>
    <h1>playground</h1>
    <!-- <XtxSkeleton :width="300" :height="200" bg="pink" />
    <XtxSkeleton :width="100" :height="50" bg="#0f8" />
    <XtxSkeleton :width="120" :height="70" bg="rgb(0, 232, 253)" />
    <XtxBread separator="|||">
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem to="">baidu</XtxBreadItem>
      <XtxBreadItem>胡萝卜</XtxBreadItem>
    </XtxBread> -->
    <XtxCheckbox v-model="flag">dianji</XtxCheckbox>
    <XtxMessage text="测试弹框" type="success" v-if="flag" />
    <button @click="flag = true">出现弹框</button>
    <h1>{{ time }}</h1>
    <button @click="start">开始定时器</button>
    <button @click="pause">暂停定时器</button>
    <button @click="resume">继续定时器</button>
    <hr />

    <!-- <button @click="$router.push('/login')">去登录</button> -->
    <Teleport to="#model">
      <XtxDialog :visible="showDialog" title="你要干啥" @close="close">
        <template #default>
          <p>p标签</p>
          <h2>h2标签</h2>
        </template>
        <template #footer>
          <XtxButton type="gray" style="margin-right: 20px">取消</XtxButton>
          <XtxButton type="primary">确认</XtxButton>
          <p>大脚</p>
        </template>
      </XtxDialog>
    </Teleport>
    <button @click="showDialog = !showDialog">显示dialog</button>
    <hr />
    <div>
      <Box1></Box1>
      <Box2></Box2>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { message } from '@/components/Message/index'
// import { useIntervalFn } from '@vueuse/core'
import { useCountDown } from '@/compositions'
// import Skeleton from '@/components/Skeleton'
import Box1 from './components/box1.vue'
import Box2 from './components/box2.vue'
export default {
  // components: {
  //   Skeleton
  // },
  components: {
    Box1,
    Box2
  },
  setup () {
    const flag = ref(false)
    const showDialog = ref(false)
    message({
      type: 'success',
      text: '登陆成功',
      time: 2000
    })
    // const time = ref(60)
    // const { pause, resume } = useIntervalFn(() => {
    //   /* your function */
    //   if (time.value-- <= 0) return pause()
    //   time.value--
    // }, 1000)
    // const start = () => {
    //   time.value = 60
    // }
    const close = (state) => {
      showDialog.value = state
    }
    const {
      time,
      pause,
      resume,
      start
    } = useCountDown(15)
    return {
      flag,
      time,
      pause,
      resume,
      start,
      showDialog,
      close
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
